<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片处理</title>
</head>
<body>
<div>
    <input type="file" id="file_input" accept=".jpg, .jpeg, .png"/>
</div>
<div id="box"></div>
<script type="text/javascript">
    var img = document.getElementById("img");
    var input = document.getElementById("file_input");
    var box = document.getElementById("box");

    function start() {
        //这边是判断本浏览器是否支持这个API。
        if (typeof FileReader === 'undefined') {
            input.setAttribute('disabled', 'disabled');
        } else {
            input.addEventListener('change', readFile, false); //如果支持就监听改变事件
        }
    }

    function createImg(src, cb, text) {
        var img = document.createElement("img");
        if (cb) {
            img.onload = function (e) {
                cb(this, e);
            }
        }
        text && (img.title = text);
        img.src = src;
        box.appendChild(img);
        return img;
    }

    function readFile() {
        var file = this.files[0];
        //判断file的类型是不是图片类型。
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }

        var reader = new FileReader(); //声明一个FileReader实例
        reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件

        reader.onload = function (e) {
            createImg(this.result, function (img) {
                initCanvas(img);
            });
        }
    }

    function initCanvas(img) {
        canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx = canvas.getContext("2d");
        convertToGray(img, canvas, ctx);
        reduceColor(img, canvas, ctx, 64);
    }

    function stepByNum(num, step) {
        var variable = parseInt(256 / step);
        if (step) {
            return Math.min(255, Math.max(0, Math.round(num / variable) * variable));
        } else {
            return parseInt(num);
        }
    }

    function convertToGray(img, canvas, ctx, step) {
        ctx.drawImage(img, 0, 0); //将图片添加到画布
        var length = canvas.width * canvas.height;
        var myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < length * 4; i += 4) {
            var myRed = myImage.data[i];
            var myGreen = myImage.data[i + 1];
            var myBlue = myImage.data[i + 2];
            myGray = stepByNum((myRed + myGreen + myBlue) / 3, step);
            myImage.data[i] = myGray;
            myImage.data[i + 1] = myGray;
            myImage.data[i + 2] = myGray;
        }
        ctx.putImageData(myImage, 0, 0);
        createImg(canvas.toDataURL("image/png"), null, "灰色");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function reduceColor(img, canvas, ctx, step) {
        ctx.drawImage(img, 0, 0); //将图片添加到画布
        var length = canvas.width * canvas.height;
        var myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < length * 4; i += 4) {
            var myRed = myImage.data[i];
            var myGreen = myImage.data[i + 1];
            var myBlue = myImage.data[i + 2];

            myImage.data[i] = stepByNum(myRed, step);
            myImage.data[i + 1] = stepByNum(myGreen, step);
            myImage.data[i + 2] = stepByNum(myBlue, step);
        }
        ctx.putImageData(myImage, 0, 0);
        createImg(canvas.toDataURL("image/png"), null, "彩色");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    start();
</script>
</body>
</html>